<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-input v-model="queryParams.keyword" style="margin-bottom:10px" type="text" prefix-icon="el-icon-search" size="small" placeholder="输入员工姓名全员搜索" @input="search" />
        <!-- 树形组件 -->
        <!-- @current-change="handleCurrentChange" 当前选中节点变化时 触发的事件 -->
        <el-tree
          ref="tree"
          :data="depts"
          node-key="id"
          default-expand-all
          highlight-current
          :props="{label:'name'}"
          :expand-on-click-node="false"
          @current-change="handleCurrentChange"
        />

      </div>

      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="end">
          <el-button size="mini" type="primary">添加员工</el-button>

          <el-button size="mini" @click="showExcelDialog = true">excel导入</el-button>

          <el-button size="mini" @click="exportExcel">excel导出</el-button>

        </el-row>

        <!-- 表格组件 -->
        <el-table :data="list">
          <el-table-column label="头像" prop="staffPhoto">
            <template #default="obj">
              <img v-if="obj.row.staffPhoto" :src="obj.row.staffPhoto" alt="" style="width: 60px; height: 60px;  border-radius: 50%;display: block;">
              <div v-else style="width: 60px; height: 60px;  border-radius: 50%;; text-align: center; line-height: 60px; background-color: #8df;">{{ obj.row.username.slice(2,3) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="手机号" sortable prop="mobile" />
          <el-table-column label="工号" sortable prop="workNumber" />
          <!-- <el-table-column label="聘用形式" prop="formOfEmployment" /> -->
          <el-table-column label="聘用形式" prop="formOfEmployment">
            <template #default="{row}">
              <span>{{ row.formOfEmployment == 1 ? '正式': '非正式' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" sortable prop="timeOfEntry" />
          <el-table-column label="操作" width="280px">
            <template #default="{row}">
              <el-button v-permission="'WATCH_EMPLOYEE'" size="mini" type="text" @click="watch(row.id)">查看</el-button>

              <el-button size="mini" type="text">角色</el-button>

              <el-button size="mini" type="text">删除</el-button>

            </template>

          </el-table-column>

        </el-table>

        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            layout="total,prev, pager, next"
            :total="total"
            :current-page="queryParams.page"
            :page-size="queryParams.pagesize"
            @current-change="handleCurrentChange2"
          />
        </el-row>
      </div>

      <!-- 导入的弹层 -->
      <!-- <ImportExcel
        :show-excel-dialog="showExcelDialog"
        @update:showExcelDialog="showExcelDialog=$event"
      /> -->
      <ImportExcel
        :show-excel-dialog.sync="showExcelDialog"
        @refresh="getEmployeeList"
      />
    </div>

  </div>

</template>

<script>
import { transformListToTree } from '@/utils'
import { getDepartment } from '@/api/department'
import { getEmployeeList, exportEmployee } from '@/api/employee'
import FileSaver from 'file-saver'
import ImportExcel from './components/import-excel.vue'

export default {
  name: 'Employee',
  components: {
    ImportExcel
  },
  data() {
    return {
      showExcelDialog: false,
      depts: [],
      queryParams: {
        keyword: '', // 输入的关键字存下来
        departmentId: '', // 点击选择的部门需要存下来id
        page: 1,
        pagesize: 10
      },
      list: [], // 右边表格  员工列表
      total: 0// 总数
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    watch(id) {
      if (this.$store.state.user.userInfo.roles.point.includes('WATCH_EMPLOYEE') === id) {
        this.$message.error('没有权限')
        return
      }
      this.$router.push(`/employee/detail/${id}`)
    },
    async exportExcel() {
      // 1.调用接口 注意返回的是二进制流数据 需要设置axios的响应类型为blob  不再是json字符串
      const res = await exportEmployee()
      // console.log(res)
      // 2.调用三方库保存成文件即可
      FileSaver.saveAs(res, '员工列表.xlsx')
    },
    search() {
      // 防抖 先关再开
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        // 完成搜索
        this.queryParams.page = 1 // 设置当前页码是1
        this.getEmployeeList()
      }, 300)
    },
    handleCurrentChange2(value) {
      this.queryParams.page = value // value是最新页码, 存下来
      this.getEmployeeList() // 重新请求  获取对应数据
    },
    async getDepartment() {
      // 递归方法 将列表转化成树形
      // let result = await getDepartment()
      this.depts = transformListToTree(await getDepartment(), 0)

      this.queryParams.departmentId = this.depts[0].id
      await this.$nextTick()
      this.$refs.tree.setCurrentKey(this.queryParams.departmentId)

      // 至少要等拿到传智教育的id, 再请求数据
      this.getEmployeeList()
    },
    // 切换部门
    handleCurrentChange(obj) {
      // 重置页面
      this.queryParams.page = 1
      // 参数obj就是是当前点击的节点的相关信息,里面有需要的id , 存下来
      // console.log(obj)
      this.queryParams.departmentId = obj.id

      this.getEmployeeList() // 切换时 ,重新获取员工列表
    },
    async getEmployeeList() {
      // 获取员工列表
      const { rows, total } = await getEmployeeList(this.queryParams)
      this.total = total
      this.list = rows
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin:10px ;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04C9BE;
      font-size: 12px;
      display:inline-block;
    }
  }
}

</style>
